<template>
	<cl-crud ref="Crud">
		<cl-row>
			<!-- 刷新按钮 -->
			<cl-refresh-btn />
			<!-- 新增按钮 -->
			<cl-add-btn />
			<!-- 删除按钮 -->
			<cl-multi-delete-btn />
			<cl-flex1 />
			<!-- 条件搜索 -->
			<cl-search ref="Search" />
		</cl-row>

		<cl-row>
			<!-- 数据表格 -->
			<cl-table ref="Table" />
		</cl-row>

		<cl-row>
			<cl-flex1 />
			<!-- 分页控件 -->
			<cl-pagination />
		</cl-row>

		<!-- 新增、编辑 -->
		<cl-upsert ref="Upsert" />
	</cl-crud>
</template>

<script lang="ts" setup>
defineOptions({
	name: 'order-goods'
});

import { useCrud, useTable, useUpsert, useSearch } from '@cool-vue/crud';
import { useCool } from '/@/cool';
import { useI18n } from 'vue-i18n';
import { ElMessage } from 'element-plus';
import AddGoodsItem from '../components/add-goods-category.vue';

const { service } = useCool();
const { t } = useI18n();

// cl-upsert
const Upsert = useUpsert({
	items: [
		{
			label: t('商品名称'),
			prop: 'goodsName',
			component: { name: 'el-input', props: { clearable: true } },
			span: 12,
			required: true
		},
		{
			label: t('商品单价'),
			prop: 'goodsPrice',
			component: { name: 'el-input', props: { clearable: true } },
			span: 12,
			required: true
		},
		{
			label: t('商品图片'),
			prop: 'goodsPic',
			component: { name: 'cl-upload' },
			span: 12
		},
		{
			label: t('商品详情图'),
			prop: 'goodsDetailPic',
			component: { name: 'cl-upload' },
			span: 12
		},
		{
			label: t('商品描述'),
			prop: 'goodsDescription',
			component: { name: 'el-input', props: { clearable: true } },
			span: 12
		},
		{
			label: t('商品分类'),
			prop: 'goodsCategory',
			component: {
				vm: AddGoodsItem,
				props: {
					clearable: true,
					isEdit: ({ data }) => !!data.id // 根据是否有id判断是否为编辑模式
				},
				ref: 'addGoodsItem'
			},
			span: 24
		}
	],
	// 自定义提交事件，改变保存按钮请求的后端
	async onSubmit(data, { next, done, close }) {
		// 方式1：使用自定义的service方法（推荐）
		try {
			// 直接验证data.goodsCategory数据，不依赖子组件ref
			let isValid = true;

			// 确保goodsCategory字段正确处理为数组格式[{},{}...]
			if (data.goodsCategory) {
				// 确保数据为数组格式，这是子组件返回的正确格式
				if (!Array.isArray(data.goodsCategory)) {
					data.goodsCategory = [data.goodsCategory];
				}

				// 验证每个商品项的必填字段
				for (let i = 0; i < data.goodsCategory.length; i++) {
					const item = data.goodsCategory[i];
					// 检查必填字段
					if (!item || typeof item !== 'object') {
						ElMessage.error(`商品数据格式错误`);
						isValid = false;
						break;
					}
					if (!item.goodsName?.trim()) {
						ElMessage.error(`商品 ${i + 1} 的名称不能为空`);
						isValid = false;
						break;
					}
					if (!item.goodsPrice?.trim()) {
						ElMessage.error(`商品 ${i + 1} 的价格不能为空`);
						isValid = false;
						break;
					}
					if (!item.goodsPic?.trim()) {
						ElMessage.error(`商品 ${i + 1} 的图片不能为空`);
						isValid = false;
						break;
					}
				}
			} else {
				// 如果没有商品分类数据，提示错误
				ElMessage.error('请添加至少一个商品');
				isValid = false;
			}

			// 如果表单验证不通过，直接返回
			if (!isValid) {
				if (done) done();
				return;
			}
			// 数据已经在验证阶段处理完成，这里只需要进行最终的过滤处理
			if (data.goodsCategory && Array.isArray(data.goodsCategory)) {
				// 过滤掉无效数据，确保只提交有效的商品对象
				data.goodsCategory = data.goodsCategory.filter(
					item =>
						item &&
						typeof item === 'object' &&
						item.goodsName?.trim() &&
						item.goodsPrice?.trim() &&
						item.goodsPic?.trim()
				);
			}

			console.log('处理后的提交数据:', data);
			// 这里可以使用任何自定义的service方法
			const res = await service.order.goods.addGoods(data);
			// 处理返回结果
			console.log('保存成功', res);
			// 关闭弹窗
			close();
			// 刷新列表
			refresh();
		} catch (error) {
			console.error('保存失败', error);
			// 确保在错误情况下也能关闭加载状态
			if (done) done();
		}

		// 方式2：如果只是想修改提交的数据，仍然使用默认的service
		// 可以对数据进行处理后调用next
		// next({
		//   ...data,
		//   // 添加额外的字段或修改现有字段
		//   customField: 'customValue'
		// });
	},
	// 获取商品信息
	async onInfo(data, { done, next }) {
		const res = await service.order.goods.getGoodsDetail({ ...data });
		// 确保数据格式正确，特别是goodsCategory字段
		if (res && res.data) {
			// 处理goodsCategory字段，确保它是数组格式
			if (res.data.goodsCategory) {
				// 确保是数组格式
				if (!Array.isArray(res.data.goodsCategory)) {
					res.data.goodsCategory = [res.data.goodsCategory];
				}
			} else {
				// 如果没有商品分类，设置为空数组
				res.data.goodsCategory = [];
			}

			console.log('处理后的详情数据:', res.data);
			done(res.data);
		} else {
			// 如果没有data字段，直接传递res
			done(res);
		}
	}
});

// cl-table
const Table = useTable({
	columns: [
		{ type: 'selection' },
		{ label: t('商品名称'), prop: 'goodsName', minWidth: 120 },
		{ label: t('商品单价'), prop: 'goodsPrice', minWidth: 120 },
		{
			label: t('商品图片'),
			prop: 'goodsPic',
			minWidth: 120,
			component: { name: 'cl-image', props: { size: 60 } }
		},
		{
			label: t('商品详情图'),
			prop: 'goodsDetailPic',
			minWidth: 120,
			component: { name: 'cl-image', props: { size: 60 } }
		},
		{ label: t('商品描述'), prop: 'goodsDescription', minWidth: 120 },
		{
			label: t('创建时间'),
			prop: 'createTime',
			minWidth: 170,
			sortable: 'desc',
			component: { name: 'cl-date-text' }
		},
		{
			label: t('更新时间'),
			prop: 'updateTime',
			minWidth: 170,
			sortable: 'custom',
			component: { name: 'cl-date-text' }
		},
		{ type: 'op', buttons: ['edit', 'delete'] }
	]
});

// cl-search
const Search = useSearch();

// cl-crud
const Crud = useCrud(
	{
		service: service.order.goods
	},
	app => {
		app.refresh();
	}
);

// 刷新
function refresh(params?: any) {
	Crud.value?.refresh(params);
}
</script>
